<template>
  <!--全局适应的顶部导航-->
  <div v-if="headerShow">
    <PageTop/>
  </div>

  <!--引入路由，index.js中配置的路径的页面可以正常显示-->
  <router-view v-if="isRouterShow"/>

</template>

<script>
import PageTop from "@/components/PageTop";
export default {
  name: 'App',
  // 局部刷新组件:
  // 在App.vue里面，声明reload方法，然后通过provide把reload方法注入，使用bol值控制router-view隐藏（销毁），
  // 再通过this.$nextTick()在dom更新之后利用bol控制router-view重新加载，实现页面刷新的效果
  provide () {
    return {
      reload: this.reload
    }
  },
  data() {
    return {
      headerShow: true,
      isRouterShow:true
    }
  },
  components: {PageTop},
  methods: {
    //重新加载组件
    async reload () {
      console.log("重新加载页面......")
      this.isRouterShow = false
      await this.$nextTick(() => {
        this.isRouterShow = true;
      })
    }
  },

  // 对路由监听，获取当前页面地址
  watch: {
    '$route':function (){
      console.log("路由为：" + this.$route.path)
      //若为index页面则不显示顶部导航栏
      if (this.$route.path === "/") {
        this.headerShow = false;
      } else {
        this.headerShow = true;
      }
    },
  },
}
</script>

<style>
/* 删除原本超链接样式 */
a {
  color: rgb(190, 158, 111);
  text-decoration: none;
}

a:link {
  text-decoration: none;
  color: rgb(190, 158, 111);
}

a:visited {
  color: rgb(190, 158, 111);
  text-decoration: none;
}

a:hover {
  cursor: pointer;
}

</style>

